<!--
  - Copyright (c) 2018.
  - 北京九思金信科技有限公司对该文件内容保留所有权利。
  - 未经许可，不得私自拷贝、传播、发布、引用该文件内容，违者将被追究法律责任。
  -->
  
<template>
  <div class="header_box">
    <div class="header_title">
      <p>{{title}}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "joysHeader",
  data() {
    return {
      title: "首页"
    };
  },
  watch: {
    $route(to, from) {
      if (this.$route.path === "/Home") {
        this.title = "首页";
      } else if (this.$route.path === "/Info") {
        this.title = "信息";
      } else if (this.$route.path === "/Sue") {
        this.title = "应用";
      } else if (this.$route.path === "/My") {
        this.title = "我的";
      }
    }
  }
};
</script>

<style scoped lang="less">
.header_box {
  position: fixed;
  top: 0rem;
  left: 0rem;
  z-index: 100;
  width: 100%;
  // height: 100%;
  overflow: hidden;
  // margin-bottom: 0.53rem;
  .header_title {
    width: 100%;
    height: 0.44rem;
    text-align: center;
    line-height: 0.44rem;
    background: #ffffff;
    box-shadow: inset 0 -1px 0 0 rgba(207, 207, 207, 0.2);
    p {
      font-family: Semibold;
      font-size: 0.17rem;
      color: #3e3e3e;
      letter-spacing: -0.41px;
      text-align: center;
      height: 0.44rem;
      line-height: 0.44rem;
    }
  }
}
</style>
